@import "common";
@baseFont:50;
input {
    outline: none;
    border: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

body {
    min-width: 320px;
    // max-width: 750px;
    width: 15rem;
    height: 2000px;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background-color: #f7f7f7;
}


/*头部搜索框部分*/
.search-content {
    // display: flex;
    position: fixed;
    z-index: 999;
    top: 0;
    // left: 50%;
    // transform: translateX(-50%);
    width: 15rem;
    margin: 0 auto;
    
    height: (180rem / @baseFont);
    background-color: #ff8583;
    .search-hd {
        display: flex;
        height: (88rem / @baseFont);
        .classify {
            margin: (15rem / @baseFont) (20rem / @baseFont) (20rem / @baseFont) (35rem / @baseFont) ;
            width: (36rem / @baseFont);
            height: (60rem / @baseFont);
            background: url(../images/classify.png) no-repeat;
            //图片跟着盒子一起缩放
            background-size:(36rem / @baseFont) (60rem / @baseFont);
        }
        .header-pic {
            flex: 1;
            text-align: center;
            height: (88rem / @baseFont);
            img {
                width: (390rem / @baseFont);
                height: (76rem / @baseFont);
            }
        }
        .login {
            margin: (15rem / @baseFont) (30rem / @baseFont) (20rem / @baseFont) (20rem / @baseFont) ;
            width: (36rem / @baseFont);
            height: (60rem / @baseFont);
            background: url(../images/login.png) no-repeat;
            background-size:(36rem / @baseFont) (60rem / @baseFont);
        }
    }
    .search-bd {
        width: (702rem / @baseFont);
        height: (88rem / @baseFont);
        margin: 0 auto;
        input {
            width: 100%;
            height: (65rem / @baseFont) ;
            line-height: (65rem / @baseFont);
            border-radius: (33rem / @baseFont);
            font-size: (25rem / @baseFont);
            padding-left: (30rem / @baseFont);
            color:#757575;

        }
    }
}

/*轮播图部分*/
.swiper-img {
    // width: (750rem / @baseFont);
    // margin: 0 auto;
    // position: absolute;
    // padding-top: (180rem / @baseFont);
    // top: (136rem / @baseFont);
    margin-top:(175rem / @baseFont);
    // padding-top: (50rem / @baseFont);
    height: (300rem / @baseFont);
    
    img {
        width: (702rem / @baseFont);
        height: (250rem / @baseFont);
        border-radius: (20rem / @baseFont);
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        background-color: #ff8583;
    
    }
    .swiper-slide {
        text-align: center;
        font-size: (18rem / @baseFont);
        // background: #fff;
    
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-pagination {
        bottom: (20rem / @baseFont) !important;
    }
}

/*广告部分*/
.ad {
    // margin: 0 auto;
    // width: (750rem / @baseFont);
    // width: 100%;
    height: (201.06rem / @baseFont);
    ul {
        display: flex;
        li {
            flex:1;
            img {
                width: 100%;
            }
        }
    }
}

/*导航栏nav部分*/
.nav {
    // margin: 0 auto;
    // width: (750rem / @baseFont);
    height: (308rem / @baseFont);
    background-color: #f4f4f4;
    ul{
        //清除浮动
        overflow: hidden;
        display: flow;
        // display: flex;
        // flex-wrap: wrap;
        li {
            float: left;
            // flex: 1;
            width: (150rem / @baseFont);
            // height: (142rem / @baseFont);
            text-align: center;
            a{
                display: block;
                width: 100%;
                // height: 100%;
                img {
                    display: block;
                    width: (84rem / @baseFont);
                    height: (84rem / @baseFont);
                    margin: (20rem / @baseFont) auto 0;
                }
                p {
                    // margin-top: (10rem / @baseFont);
                    // height: (28rem / @baseFont);
                    // line-height: (28rem / @baseFont);
                    font-size: (22rem / @baseFont);
                    color: #666666;
                }
            }
        }
    }
}

/*新人模块newcomer*/
.newcomer {
    margin-bottom: (24rem / @baseFont);
    height: (234rem / @baseFont);
   a{
       float: left;
   }
   .newItem1 {
        width: (373.5rem / @baseFont);
        height: (234rem / @baseFont);
        img {
            width: 100%;
            height: 100%;
        }
   }
   .newItem2,.newItem3 {
        width: (186.25rem / @baseFont);
        height: (234rem / @baseFont);
        img {
            width: 100%;
        }
   }
   .newItem2 {
    margin-right: (2rem / @baseFont);
   }
}

 //公共样式部分
.left-right-area {
    width: (350rem / @baseFont);
    height: (258rem / @baseFont);
    .title {
        // width: (112rem / @baseFont);
        height: (40rem / @baseFont);
        margin: (18rem / @baseFont) (8rem / @baseFont) 0 (24rem / @baseFont);
        color:#333;
        font-size: (28rem / @baseFont);
        font-weight: 700;
    }
    .desc {
        width: (300rem / @baseFont);
        height: (30rem / @baseFont);
        margin: (4rem / @baseFont) 0 0 (24rem / @baseFont);
        font-size: (24rem / @baseFont);
        color: #999999;
    }
    ul {
        display: flex;
        width: (350rem / @baseFont);
        padding-left: (28rem / @baseFont);
        margin-top: (5rem / @baseFont);
        li {
            // flex: 1;
            width: (120rem / @baseFont);
            height: (149rem / @baseFont);
            text-align: center;
            a {
                // display: block;
                width: 100%;
                // height: 100%;
                p {
                     // width: 100%;
                    height: (28rem / @baseFont);
                    line-height: (28rem / @baseFont);
                    font-size: (22rem / @baseFont);
                    color: #FF5500;
                }
            }
            img {
                display: block;
                width: 100%;
            }
        }
          .left {
            margin-right: (55rem / @baseFont);
            .price {
                margin-top: (1rem / @baseFont);
            }
        }
    }
}
/*miaosha模块*/
.miaosha-area,.recmd-area2 {
    display: flex;
    flex-wrap: wrap;
    width: (702rem / @baseFont);
    border-radius: (12rem / @baseFont) (12rem / @baseFont) 0 0;
    border-bottom: 1px solid #f2f2f2;
    // height: (258rem / @baseFont);
    margin: 0 auto;
    background-color: #ffffff;
    overflow: hidden;
    .miaosha-left-area,.recmd-left-area {
        border-right: 1px solid #f2f2f2;
    }
}

/*推荐模块*/
.recommend {
    display: flex;
    width: (702rem / @baseFont);
    height: (172rem / @baseFont);
    border-radius: 0 0 (12rem / @baseFont) (12rem / @baseFont);
    margin: 0 auto;
    background-color: #ffffff;
    //左部title部分
    .title-area {
        width: (173rem / @baseFont);
        padding: (47rem / @baseFont) (18rem / @baseFont) 0;
        .title {
            font-size: (32rem / @baseFont);
            font-weight: 700;
            color:#444444;
        }
        .desc {
            font-size: (24rem / @baseFont);
            color:#999;
        }
    }
    //右边推荐物品部分
    ul {
        display: flex;
        li {
            margin-right: (10rem / @baseFont);
            width: (120rem / @baseFont);
            
            a {
                overflow: hidden;
                display: block;
                width: 100%;
                height: 100%;
                img {
                    display: block;
                    width: (100rem / @baseFont);
                    height: (100rem / @baseFont);
                    margin: (20rem / @baseFont) auto 0;
                }
                p {
                    font-size: (22rem / @baseFont);
                    text-align: center;
                    color: #333;
                    overflow: hidden;/*超出部分隐藏*/
                    white-space: nowrap;/*不换行*/
                    text-overflow:ellipsis;/*超出部分文字以...显示*/
                }
            }

        }
    }
}

/*推荐榜单模块*/
.recommended-list {
    /*榜单1*/
    a {
        display: block;
    }
    .recmd-list-hd {
        height: (60rem / @baseFont);
        img {
            height: (60rem / @baseFont);
        }
    }
    .recmd-list-bd {
        width: (702rem / @baseFont);
        // height: (266rem / @baseFont);
        margin: 0 auto;
        ul {
            display: flex;
            li {
                position: relative;
                width: (226rem / @baseFont);
                height: (270rem / @baseFont);
                border-radius: (12rem / @baseFont);
                margin-right: (10rem / @baseFont);
                background-color: #ffffff;
                overflow: hidden;
                .good {
                    display: block;
                    width: (150rem / @baseFont);
                    height: (150rem / @baseFont);
                    margin: (15rem / @baseFont) (38rem / @baseFont) 0;
                }
                .bg {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    display: block;
                    width: 100%;
                    height: (93rem / @baseFont);
                    // z-index: -1;
                }
                //公共样式
                P {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    text-align: center;
                    color:#FFF;
                    width: 100%;
                }
                .three-name {
                    width:(100rem / @baseFont);
                    height: (34rem / @baseFont);
                    border: 2px solid #d9a87a;
                    border-radius: (20rem / @baseFont);
                    background-color: #fff;
                    font-size: (22rem / @baseFont);
                    color: #d9a87a;
                    
                }
                .three-title {
                    top:(200rem / @baseFont);
                    font-size: (26rem / @baseFont);
                }
                .three-desc {
                    top:(235rem / @baseFont);
                    font-size: (22rem / @baseFont);
                }
            }

        }
    }

    /*榜单2*/
    .recmd-area2 {
        margin-top: (15rem / @baseFont);
    }
}


/*商品goods模块*/
.goods-list {
    margin-top: (30rem / @baseFont);
    .goods-hd {
        display: block;
        width: (702rem / @baseFont);
        margin: 0 auto;
        img {
            width: 100%;
        }
    }
    .goods-bd {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: (702rem / @baseFont);
        margin: 0 auto;
        /*公共样式部分*/
        ul {
            width: (342rem / @baseFont);
            li {
                width: 100%;
                border-radius: (12rem / @baseFont);
                margin-bottom: (18rem / @baseFont);
                padding-bottom: (10rem / @baseFont);
                background-color: #fff;
                a{
                    display: block;
                }
                .goods-pic {
                    width: 100%;
                    height: (342rem / @baseFont);
                }
                h1 {
                    width: (318rem / @baseFont);
                    height: (67rem / @baseFont);
                    line-height:(34rem / @baseFont); ;
                    margin: (18rem / @baseFont) auto 0;
                    font-size: (26rem / @baseFont);
                    color:#333;
                    /*只兼容webkit内核的浏览器*/
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;  // 控制多行显示的行数
                    -webkit-box-orient: vertical;
                }
                //.cuxiao
                p {
                    display: flex;
                    //不要给宽度 让内容撑开
                    // width: (280rem / @baseFont);
                    //要设置高度啊 这让下面的隐藏才其效果 如果让内容自动撑开盒子的话 隐藏就不会有效果了
                    height: (24rem / @baseFont);
                    margin: (11rem / @baseFont) (12rem / @baseFont) (20rem / @baseFont);
                    //允许换行 超出部分隐藏 这样在手机端上面就可以隐藏掉部分span
                    flex-wrap: wrap;
                    overflow: hidden;
                }
                .dajvhui,.discount {
                    height: (24rem / @baseFont);
                    border: 1px solid #ffbb00;
                    border-radius: (6rem / @baseFont);
                    margin: 0 (3rem / @baseFont) (2rem / @baseFont) (2rem / @baseFont);
                    line-height: (24rem / @baseFont);
                    font-size: (18rem / @baseFont);
                    color: #333;
                    background-color: #FEFBEE;
                    padding: 0 (12rem / @baseFont);
                }
                
                .price-comment {
                    display: flex;
                    width: (330rem / @baseFont);
                    margin-left: (13rem / @baseFont);
                    .price {
                        display: flex;
                        span {
                            font-size: (24rem / @baseFont);
                            font-weight: 700;
                            color: #FF4422;   
                        }
                    }
                    .comment {
                        display: flex;
                        margin-left: (13rem / @baseFont);
                        span {
                            font-size: (20rem / @baseFont);
                            color:#999;
                        }
                    }
                }
            }
        }
        /*左边列表*/
        .left-list {
            .left-logo {
                display: block;
                width: (128rem / @baseFont);
                height: (24rem / @baseFont);
                margin: 0 (6rem / @baseFont) (2rem / @baseFont) 0;
            }
        }
        /*右边列表*/
        .right-list {
            .right-logo {
                display: block;
                width: (48rem / @baseFont);
                height: (24rem / @baseFont);
                margin: 0 (6rem / @baseFont) (2rem / @baseFont) 0;
            }

        }
        
    }
}

/*footer模块*/
.footer {
    position: fixed;
    z-index: 999;
    bottom: 0;
    width: 15rem;
    margin: 0 auto;
    height: (101rem / @baseFont);
    background-color: #fff;
    ul {
        display: flex;
        width: 100%;
        height: 100%;
        li {
            width: (150rem / @baseFont);
            a{
                display: block;
                img {
                    display: block;
                    width: (48rem / @baseFont);
                    height: (48rem / @baseFont);
                    margin: (12rem / @baseFont) auto 0;
                }
                p {
                    font-size: (20rem / @baseFont);
                    font-weight: 700;
                    color:#666;
                    text-align: center;
                }
                .current {
                    color: #000;
                }
            }

        }
    }
}
